<template>
  <el-container>
    <my-theme-card>
      <el-header />
      <el-container>
        <el-main>
          <el-col :span="1"><div class="grid-content bg-purple-light">
            <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="addRoleClick">新增</el-button>
          </div></el-col>
          <template>
            <el-table
              :data="roles"
              stripe
              border
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="角色名称"
                width="180"
              />
              <el-table-column
                prop="code"
                label="角色唯一编码"
              />
              <el-table-column
                prop="description"
                label="角色描述"
                width="180"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="180"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="setMenuClick(scope.row)">设置菜单</el-button>
                  <el-button type="text" size="small" @click="deleteRoleClick(scope.row)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </el-main>
      </el-container>

      <el-footer>
        <div class="block">
          <el-pagination
            :current-page="page.current"
            :page-sizes="[5,10, 20, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-footer>

      <el-dialog :title="form.title" :visible.sync="dialogFormVisible" label-width="130px" :close-on-click-modal="false" center append-to-body>
        <el-form :model="tempRole" label-width="130px" :inline="true">
          <el-form-item label="角色名称">
            <el-input v-model="tempRole.name" />
          </el-form-item>
          <el-form-item label="角色影响部门范围">
            <el-select v-model="tempRole.role_scope" placeholder="请选择">
              <el-option
                v-for="item in dir_role_scope"
                :key="item.id"
                :label="item.label"
                :value="item.data"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="角色描述信息">
            <el-input v-model="tempRole.description" />
          </el-form-item>
          <el-form-item label="角色是否可删除">
            <el-select v-model="tempRole.del_flag" placeholder="请选择">
              <el-option
                v-for="item in dir_logic"
                :key="item.id"
                :label="item.label"
                :value="item.data"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTask">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="删除确认"
        :visible.sync="dialogConfirmVisible"
        :close-on-click-modal="false"
        width="30%"
        append-to-body
        center
      >
        <span>{{ deleteMessage }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogConfirmVisible = false">取 消</el-button>
          <el-button type="danger" @click="deleteRoleTask">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="菜单选择" :visible.sync="dialogMenuVisible" :close-on-click-modal="false" center append-to-body>
        <menu-choose :keys="checkMenuKeys" @confirm="closeMenusDialog" />
      </el-dialog>
    </my-theme-card>
  </el-container>
</template>

<script>
const MenuChoose = () => import('@/components/MenuChoose/index')
import request from '@/utils/request'
export default {
  components: {
    MenuChoose
  },
  data() {
    return {
      page: {
        current: 1,
        size: 5,
        total: 0
      },
      tempRole: {},
      deleteRole: {},
      deleteMessage: '确认删除该角色吗？',
      dialogMenuVisible: false,
      dialogConfirmVisible: false,
      dialogFormVisible: false,
      form: {
        title: '角色增加'
      },
      roles: [],
      currentRole: {},
      checkMenuKeys: [],
      checkMenus: []
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    },
    dir_role_scope: function() {
      return this.$store.state.directory.directory['role_scope']
    }
  },
  created() {
    this.directoryUpdate()
    this.query()
  },
  methods: {
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
      this.$store.commit('directory/setDirectory', 'role_scope')
    },
    // 设置关联菜单点击事件
    setMenuClick: function(role) {
      this.currentRole = role
      this.queryMenusByRole()
      this.dialogMenuVisible = true
    },
    // 选择菜单返回事件
    closeMenusDialog: function(keys, menus) {
      this.checkMenus = menus
      this.dialogMenuVisible = false
      this.updateRoleMenusTask()
    },
    // 每页显示数目发生变化时
    handleSizeChange: function(val) {
      this.page.size = val
      this.page.current = 1
      this.query()
    },
    // 当前页发生变化时
    handleCurrentChange: function(val) {
      this.page.current = val
      this.query()
    },
    // 添加事件
    addRoleClick: function() {
      this.dialogFormVisible = true
    },
    // 删除事件
    deleteRoleClick: function(role) {
      this.dialogConfirmVisible = true
      this.deleteRole = role
    },
    // 添加任务
    addTask: function() {
      this.$progress.start()
      request({
        url: '/system/role/add',
        method: 'post',
        data: this.tempRole
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.dialogFormVisible = false
          this.query()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    },
    // 删除角色任务
    deleteRoleTask: function() {
      this.$progress.start()
      request({
        url: '/system/role/delete',
        method: 'post',
        data: this.deleteRole
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.dialogConfirmVisible = false
          this.query()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    query: function() {
      this.$progress.start()
      request({
        url: '/system/role/query',
        method: 'post',
        data: this.page
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.page.total = res.data.total
          this.roles = res.data.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    queryMenusByRole: function() {
      this.$progress.start()
      this.checkMenuKeys = []
      request({
        url: '/system/menu/queryMenusByRole',
        method: 'post',
        data: this.currentRole
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          if (res.data) {
            res.data.forEach((menu) => {
              this.checkMenuKeys.push(menu.id)
            })
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    // 更新角色关联的菜单
    updateRoleMenusTask: function() {
      this.$progress.start()
      request({
        url: '/system/role/updateRoleMenus',
        method: 'post',
        data: {
          menus: this.checkMenus,
          role: this.currentRole
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    }
  }
}
</script>
